
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="程序流程图,layui扩展,hsiangleev">
    <title>layui扩展程序流程图示例</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon.ico">
    <style>
		canvas{
			border: 1px solid #aaa;
		}
	</style>
</head>
<body>
    <canvas id="cvs" width="800" height="800"></canvas>
    
    <script src="../layui/layui.js"></script>
    <script>
        layui.config({
            base: "../layui/lay/mymodules/"
        }).use(['eFlowChart'], function(){
            var $ = layui.jquery;
            var eFlowChart = layui.eFlowChart;
            
            eFlowChart.render({
                el: "#cvs",
                bdColor: "#ff4200",
                bgColor: "#ddd",
                textFont: "14px serif",
                textColor: "#666",
                data: [
                    {x: 170, y: 20, width: 60, height: 60, text: "开始", bgColor: "#adff2e", type: "StartNode"},
                    {x: 630, y: 430, width: 100, height: 60, text: "流程结束", bgColor: "#ff4400", type: "EndNode"},
                    {xStart: 200, yStart: 80, xEnd: 200, yEnd: 140, text: "提交审批", type: "Line"},
                    {xStart: 200, yStart: 200, xEnd: 200, yEnd: 260, type: "Line"},
                    {xStart: 150, yStart: 290, xEnd: 100, yEnd: 350, text: "否", type: "Line"},
                    {xStart: 100, yStart: 410, xEnd: 100, yEnd: 470, text: "流转", type: "Line"},
                    {xStart: 100, yStart: 530, xEnd: 100, yEnd: 590, type: "Line"},
                    {xStart: 250, yStart: 290, xEnd: 250, yEnd: 350, text: "是", type: "Line"},
                    {xStart: 250, yStart: 410, xEnd: 140, yEnd: 500, text: "是", type: "Line"},
                    {xStart: 150, yStart: 620, xEnd: 210, yEnd: 620, type: "Line"},
                    {xStart: 370, yStart: 620, xEnd: 450, yEnd: 480, type: "Line"},
                    {xStart: 370, yStart: 620, xEnd: 450, yEnd: 620, type: "Line"},
                    {xStart: 370, yStart: 620, xEnd: 450, yEnd: 760, type: "Line"},
                    {xStart: 550, yStart: 480, xEnd: 630, yEnd: 620, type: "Line"},
                    {xStart: 550, yStart: 620, xEnd: 630, yEnd: 620, type: "Line"},
                    {xStart: 550, yStart: 760, xEnd: 630, yEnd: 620, type: "Line"},
                    {xStart: 680, yStart: 590, xEnd: 680, yEnd: 490, type: "Line"},
                    {x: 150, y: 140, width: 100, height: 60, text: "发起请假申请", bdColor: "#000", bgColor: "#008100", type: "ProcNode",textColor: "#ff4200"},
                    {x: 60, y: 350, width: 80, height: 60, text: "行政备案", bgColor: "#008100", type: "ProcNode",textColor: "#ff4200"},
                    {x: 60, y: 470, width: 80, height: 60, text: "部门备案", bgColor: "#008100", type: "ProcNode",textColor: "#ff4200"},
                    {x: 200, y: 350, width: 100, height: 60, text: "人事部门审批", bgColor: "#008100", type: "ProcNode",textColor: "#ff4200"},
                    {x: 450, y: 450, width: 100, height: 60, text: "部门审批，需要部门负责人确认签字", bgColor: "#fff", type: "ProcNode"},
                    {x: 450, y: 590, width: 100, height: 60, text: "人事审批", bgColor: "#fff", type: "ProcNode"},
                    {x: 450, y: 730, width: 100, height: 60, text: "总公司审批", bgColor: "#fff", type: "ProcNode"},
                    {x: 150, y: 260, width: 100, height: 60, text: "是否超过3天", bgColor: "#ffa500", type: "CondNode"},
                    {x: 210, y: 580, width: 160, height: 80, text: "当前假期不够，申请延长假期", bgColor: "#ffa500", type: "CondNode"},
                    {x: 50, y: 590, width: 100, height: 60, text: "请假子流程",distance: 8, bgColor: "#ffc1cb", type: "ChildNode"},
                    {x: 630, y: 590, width: 100, height: 60, text: "会签", bgColor: "#ffff00", type: "ConfNode",radius: 30}
                ],
                arrowSize: {
                    // x: 15,
                    // y: 15,
                    // distance: 8
                },
                nodeType: {
                    drawOval: ["StartNode","EndNode"],
                    drawLineArrow: ["Line"],
                    drawRect: ["ProcNode"],
                    drawRiamond: ["CondNode"],
                    drawLineRect: ["ChildNode"],
                    drawRadiusRect: ["ConfNode"],
                },
                event: {
                    click: function(d) {
                        console.log("click:",d)
                    },
                    mouseenter: function(d) {
                        console.log("mouseenter：",d)
                    },
                    mouseleave: function(d) {
                        console.log("mouseleave: ",d)
                    }
                }
            })

        })
            
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9e39de91fc206c680fb0266ab977e776";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
        
</body>
</html>